<template>
    <div :class='$style.page'>
        <div :class='$style.body'>
            <div v-if='!deviceOnline' :class='$style.offLine'>设备已掉线</div>
            

            <section class='p-l-r m-t-30'>
                <div :class='$style.portPart'>
                    <div class='font-bold'>选择插座</div>
                    <div :class='$style.ports'>
                        <template v-for='(port, index) in portList' :key='index'>
                            <div :class='[$style.port, port.status == 0 ? $style.free : $style.disabled, selectedPortIndex == index ? $style.selected : ""]' @click='selectPort(index)'>
                                <div :class='$style.portNo'>{{port.portNo}}</div>
                                <div :class='[$style.status]'>{{port.statusStr}}</div>
                            </div>
                        </template>
                    </div>
                </div>

                <div class='m-t-30' :class='$style.quantityPart'>
                    <div class='font-bold'>选择充电{{priceChargeType == 2 ? '度数' : '金额'}}</div>
                    <div :class='$style.options'>
                        <template v-for='(item, index) in priceOptions' :key='index'>
                            <div :class='[$style.option, selectedPriceIndex == index ? $style.selected : ""]' @click='selectPriceOption(index)'>
                                <template v-if='item.f == 1'>
                                    <div :class='$style.wrap'>
                                        <div>充满自停</div>
                                        <div class='f-24'>(不超过<template v-if='rateMethod == 1'>{{item.q}}{{priceChargeType == 2 ? '度' : '小时'}}</template><template v-else>{{item.a}} {{priceChargeType == 2 ? '度' : '元'}}</template></div>
                                    </div>
                                </template>
                                <template v-else>
                                    <div :class='$style.wrap'>
                                        <template v-if='rateMethod == 1'>{{item.amount}}元</template>
                                        <template v-else> {{item.a}} {{priceChargeType == 2 ? '度' : '元'}}</template>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>

                <div class='m-t-30'>
                    <div :class='$style.cell'>
                        <div :class='$style.body'>
                            <span>余额：</span>
                            <span class='color-f9696c font-bold'>{{balance}}元</span>
                        </div>
                        <div class='color-primary'>去充值</div>
                        <span :class='$style.arr'></span>
                    </div>
                </div>

            </section>

            <section class='p-l-r p-t'>
                <div class='flex-align-items-center'>
                    <span class='flex-1 f-32 font-bold'>设备详情</span>
                    <div></div>
                </div>
                <div class='m-t-10 color-666'>
                    <div>设备编号：<span class='m-l-10'>{{deviceNo}}</span></div>
                    <div>空闲插座：<span class='m-l-10' :class='$style.freePortCount'>{{device.freePortCount || 0}}个</span></div>
                    <div>详细地址：<span class='m-l-10'>{{device.address}}</span></div>
                    <div>客户电话：<a class='m-l-10' :href='"tel:" + device.phone'>{{device.phone}}</a></div>
                    
                </div>
            </section>

        </div>
        <footer :class='$style.footer'>
            <button class='button' @click='charge'>充电</button>
        </footer>
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from '@vue/reactivity';
    import { deviceDetailApi } from '@/api/device'
    import { useRoute } from 'vue-router'
    import { queryBalanceApi } from '@/api/user'

    const $route = useRoute()

    const deviceNo = ($route.params.deviceNo) || '23234234'

    const deviceOnline = ref(true)

    const device = reactive({
        freePortCount : 0,
        address : '',
        phone : ''
    })
    const portList = reactive<any[]>([])
    const priceOptions = reactive<any[]>([])
    const rateMethod = ref(0)
    const priceChargeType = ref(0)
    const chargePayType = ref(1) //1是余额，2：是套餐
    const balance = ref(0)

    const selectedPortIndex = ref(-1)
    const selectedPriceIndex = ref(-1)
    

    function selectPort(index:number) {
        if(selectedPortIndex.value != index && portList[index].status == 0) selectedPortIndex.value = index
        
    }

    function selectPriceOption(index:number) {
        if(selectedPriceIndex.value != index) selectedPriceIndex.value = index
        
    }

    async function charge() {
        if(deviceOnline.value == false) {
            //alert('设备已掉线')
            //return
        }

        if(selectedPortIndex.value == -1) {
            alert('请选择插座')
            return
        }

        if(selectedPriceIndex.value == -1) {
            alert(`选择充电${priceChargeType.value == 2 ? '度数' : '金额'}`)
            return
        }

        let priceCombo = JSON.parse(JSON.stringify(priceOptions[selectedPriceIndex.value]))
        delete priceCombo.amount

        const params = {
            deviceNo,
            portNo : portList[selectedPortIndex.value].portNo,
            chargePayType : chargePayType.value,
            priceChargeType : priceChargeType.value,
            priceCombo : priceCombo
        }

        console.log(params)

    }

    deviceDetailApi(deviceNo).then(res => {
        if(!res.success ) alert('设备不存在')

        const data = res.data
        if(!data) alert(res.msg)

        if(data.connectStatus != 1) deviceOnline.value = false

        if(!data.hasOwnProperty('rateMethod')) {
          data.rateMethod = 1
        }

        rateMethod.value = data.rateMethod
        priceChargeType.value = data.priceChargeType

        device.address = data.address
        device.phone = data.phone

        const {vehicleType, chargeType} = data

        if(data.portInfos) {
            data.portInfos.forEach(port => {
                if(port.status == 0) device.freePortCount += 1
                portList.push(port)
            })
            
        }

        let priceList:any = data.priceCombo
        if(priceList) {
            if (typeof priceList == 'string') {
                priceList = JSON.parse(priceList)
            }

            priceList.forEach(price => {
              if (data.rateMethod == 1) {
                price.amount = data.priceChargeType == 2 ? Number((price.a / 100).toFixed(2)) : price.a
              } else {
                price.amount = data.priceChargeType == 2 ? (data.electricityPrice * price.a) : price.a
              }

              priceOptions.push(price)
            })
        }

    })

    queryBalanceApi().then(data => {
        if(data) {
            balance.value = data.totalBalance
        }
    })

</script>


<style scoped lang='scss' module>
     .cell{
         height: 88px;
         display: flex;
         align-items: center;
         border-bottom:1px solid $border-color;

         .body{
             flex: 1;
         }

         .arr{
             width: 14px;
             height: 14px;
             border: 1px solid silver;
             border-bottom-color:transparent;
             border-left-color:transparent;
             transform: rotate(45deg) translate(-3px, 3px);
             margin-left: 6px;
         }
         
     }


    .page{
        height: 100vh;
        display: flex;
        flex-direction: column;
        .body{
            flex: 1;
            overflow-y: auto;
        }
    }
    
    .offLine{
        line-height: 80px;
        text-align: center;
        background: rgb(189, 28, 28);
        color: #fff;
    }

    .freePortCount{
        color: $free-color;
        font-weight: bold;
    }
    

    @mixin grid($count) {
        display: grid;
        grid-template-columns: repeat($count, 1fr);
        gap: 10px;
        margin-top: 10px;
    }

    @mixin selected {
        &.selected{
            background:#628be3 linear-gradient(to right, #6290f5, #62b8f5);
            color: #fff !important;
            border: none;

            .status {
                color: #fff !important;
            }
        }
    }

    .ports{
        @include grid(5);
        .port{
            text-align: center;
            border-radius: 6px;
            padding: 16px 0;
            box-shadow: 1px 2px 10px 1px #dddddd;
            margin-top: 10px;

            .status{
                font-size: 24px;
            }

            &.free{
                .status {
                    color: $free-color;
                }
            }

            &.disabled{
                border-color:rgba(235,235,235,0.7);
                background:rgb(247,247,247);
                color:rgb(204,204,204);
            }

            @include selected;
        }
    }

    .options{
        @include grid(3);

        .option {
            border-radius: 6px;
            vertical-align: middle;
            position: relative;
            height: 120px;
            border:1px solid $border-color;

            .wrap{
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                text-align: center;
                transform: translateY(-50%);

                .amount{
                    font-size: 32px;
                    font-weight: bold;
                }
            }

            @include selected;
        }
    }

    .footer{
        padding:0 60px 40px 60px;
    }

</style>